<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="telephone=no" name="format-detection" />
        <title>首页</title>
        <link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
        .top-img{
            width: 100%;
            height: 10rem;
            background: url(/imgs/pic_index.png) no-repeat;
            background-size: 100% auto;
        }
        .tag{
            border: 1px solid #D9D9D9;
            border-radius: 5px;
            background-color: #FFFFFF;
            width: 95%;
            margin: 0 auto;
            padding: 10px 0;
            display: flex;
            margin-top: -8%;
            z-index: 99;
            position: relative;
            overflow: hidden;
        }
        .tiao{
            color: #FFFFFF;
            background-color: #D14A4F;
            text-align: center;
            position: absolute;
            right: -43px;
            top: -9px;
            width: 100px;
            height: 35px;
            line-height: 60px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            padding: 10px;
        }
        .tag-left{
            flex: 0 0 25%;
            position: relative;
        }
        .center{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            text-align: center;
        }
        .portrait{
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin-bottom: 5px;
        }
        .detail{
            flex: 0 0 75%;
            font-size: 0.8rem;
        }
        .detail-li{
            margin: 10px 0;
        }
        .title{
            display: inline-block;
            vertical-align: middle;
        }
        .value{
            display: inline-block;
            vertical-align: middle;
        }
        .red{
            color: #D42400;
        }
        .items-wrap{
            width: 90%;
            margin: 0 auto;
            font-size: 0;
        }
        .item{
            width: 33%;
            display: inline-block;
            text-align: center;
            box-sizing: border-box;
            padding: 10px;
        }
        .item img{
            width: 100%;
        }
        .small_btn{
            position: absolute;
            right: 10%;
            bottom: 43px;
            width: 16%;
        }
        .small_btn_2{
            position: absolute;
            right: 10%;
            bottom: 15px;
            width: 16%;
        }
    </style>
    <body>
        <div class="top-img"></div>
        <div class="tag">
            <div class="tiao">顶级推广</div>
            <div class="tag-left">
                <div class="center">
                    <img class="portrait" src="{{$agent->avatar}}"/>
                </div>
            </div>
            <div class="detail">
                <div class="detail-li">
                    <div class="title">真实姓名</div><span class="mao">:</span>
                    <div class="value">{{$agent->realname}}</div>
                </div>

                <div class="detail-li">
                    <div class="title">电&nbsp;&nbsp;话</div><span class="mao">:</span>
                    <div class="value">{{$agent->mobile}}</div>
                </div>

                <div class="detail-li">
                    <div class="title">推广地区</div><span class="mao">:</span>
                    <div class="value">{{$agent->address}}</div>
                </div>

                <div class="detail-li">
                    <div class="title">我的余额</div><span class="mao">:</span>
                    <div class="value">￥{{$agent->money}}</div>
                </div>
            </div>
        </div>
        <div class="items-wrap">

            <div class="item" data-id = '1' onclick="window.location.href='/mobile/superagent/my_son/{{$agent->id}}'">
                <img src="{{asset('/imgs/wdxj.png')}}"/>
            </div>

            <div class="item" data-id = '3' onclick="window.location.href='/mobile/superagent/audit_list/{{$agent->id}}'">
                <img src="{{asset('/imgs/tgsh.png')}}"/>
            </div>

            <div class="item"  data-id = '6' onclick="window.location.href='/mobile/superagent/dvlp/{{$agent->id}}'">
                <img src="{{asset('/imgs/fztg.png')}}"/>
            </div>

            <div class="item"  data-id = '5' onclick="window.location.href='/mobile/superagent/income/{{$agent->id}}'">
                <img src="{{asset('/imgs/srgl.png')}}"/>
            </div>

        </div>
        
    <script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript">
        $('.item').on('touchstart', function() {
            var myid = $(this).attr('data-id')
            console.log(myid)
        })
        $('#btnTX').on('touchstart', function() {
            console.log('提现')
        })
    </script>
    </body>
</html>
